<template>
  <div>
    <myDivider name="巡查任务"></myDivider>
    <div>
      <div style="display: flex;">
        <el-input style="width: 260px;" v-model="keyword" placeholder="巡查名称/巡查人" @keyup.enter.native="getTableList"
          clearable></el-input>
        <el-button type="primary" style=" margin-left: 15px" @click="SouSuo">查询</el-button>
        <el-button style="margin-left: 15px" @click="reset">重置</el-button>
      </div>
      <div style="display: flex;justify-content: flex-end;margin-top: 10px;padding-right: 20px;box-sizing: border-box;">
        <el-button type="primary" @click="addClick">新增</el-button>
        <el-button type="danger" plain @click="batchDeleteClick">删除</el-button>
      </div>
    </div>
    <el-table class="tableBox" :data="TableData" style="width: 100%" @sort-change="sortChange" @select="selectTable"
      @select-all="selectAllTable">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column align="center" prop="unitTypeName" label="任务名称" min-width="200px">
      </el-table-column>
      <el-table-column align="center" prop="name" label="巡查人" width="100px">
      </el-table-column>
      <el-table-column align="center" prop="unitTypeName" label="联系方式" width="100px">
      </el-table-column>
      <el-table-column align="center" prop="unitName" label="巡查时间" min-width="180px">
      </el-table-column>
      <el-table-column align="center" prop="description" label="巡查码" width="150px">
        <template slot-scope="scope">
          <div style="color: #5fadff;cursor: pointer;">
            22
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="unitName" label="创建时间" min-width="180px">
      </el-table-column>
      <el-table-column align="center" prop="sortable" sortable="custom" label="任务状态" width="150px">
        <template slot-scope="scope">
          <el-switch @change="switchChange(scope.row)" :disabled="!scope.row.sortable" v-model="scope.row.sortable"
            active-color="#13ce66" inactive-color="#e9e9ea">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200px" fixed="right">
        <template slot-scope="scope">
          <div class="textBtn">
            <el-row>
              <el-col class="el" :span="9">
                <span style="color: #5fadff;cursor: pointer;font-weight: 600;" @click="taskClick(scope.row)">任务记录</span>
              </el-col>
              <el-col class="el" :span="5">
                <span style="color: #5fadff;cursor: pointer;font-weight: 600;" @click="detailClick(scope.row)">详情</span>
              </el-col>
              <el-col class="el" :span="5">
                <span style="color: #5fadff;cursor: pointer;font-weight: 600;" @click="updateClick(scope.row)">编辑</span>
              </el-col>
              <el-col class="el" :span="5">
                <span style="color: #ef3c2a;cursor: pointer;font-weight: 600;" @click="deleteClick(scope.row)">删除</span>
              </el-col>

            </el-row>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <myPagination :pageNum="pageNum" :total="totalSize" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
    </myPagination>
  </div>
</template>





<script>
export default {

  data() {
    return {
      keyword: '',
      // 主要表格==================
      activeArr: [],//单选的情况下，该数组记录选中的数据
      cancelArr: [], //全选的情况下，该数组记录要取消掉的数据
      batchDeleteType: '',//是全选还是单选
      TableData: [{ sortable: true }, { sortable: false }, { sortable: false }, { sortable: true }, { sortable: true },], //用户数据
      pageNum: 1,
      pageSize: 10,
      totalSize: 0,
      // ==================主要表格
    };
  },
  async activated() {
    this.reset() // 重置清空 然后查询列表
  },
  methods: {
    switchChange(row) {
      this.$confirm('任务进行中，确认后任务将永久结束，确认结束吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        // 走更改状态接口
      }).catch(() => {
        row.sortable = !row.sortable
      });
    },
    selectTable(selection, row) {
      console.log(selection, row, '单选');
      if (this.batchDeleteType != 'eliminate') {
        this.batchDeleteType = 'pick'
      }
      let haveRow = false
      selection.forEach(el => {
        if (el.id == row.id) {
          haveRow = true
        }
      })
      if (this.batchDeleteType == 'eliminate') { //多选清空下，处理  需要取消的数组
        if (haveRow) {  // 如果是点击，那么 需要取消的数组就去除掉
          this.cancelArr.forEach((el, i) => {
            if (el == row.id) {
              this.cancelArr.splice(i, 1)
            }
          })
        } else {   // 如果是去除，那么 需要取消的数组就增加
          this.cancelArr.push(row.id)
        }
      } else if (this.batchDeleteType == 'pick') {//单选清空下，处理  选中的数组
        if (haveRow) {  //新增
          this.activeArr.push(row.id)
        } else {        //去除
          this.activeArr.forEach((el, i) => {
            if (el == row.id) {
              this.activeArr.splice(i, 1)
            }
          })
        }
      }

      console.log('单选', this.batchDeleteType, this.activeArr, this.cancelArr);
    },
    async selectAllTable(selection) {
      if (selection.length > 0) { //全部选中
        this.batchDeleteType = 'eliminate'
      } else { //全部取消
        this.batchDeleteType = 'pick'
      }
      this.activeArr = []
      this.cancelArr = []
    },
    sortChange(e) {
      let { order, prop } = e
      if (order) { //如果进行排序
        if (order == 'ascending') { //正序排序

        } else if (order == 'descending') { //倒序排序

        }
      } else { //没有排序

      }
    },

    // 主要按钮 ===============================================================
    addClick() { //新增按钮
      this.$router.push('/patrolTaskAdd?scene=add')
    },
    batchDeleteClick() { //批量删除按钮

    },
    taskClick(row) { //巡查记录按钮

    },
    detailClick(row) {//详情按钮

    },

    updateClick(row) {//编辑按钮
      this.$router.push('/patrolTaskAdd?scene=update')
    },

    deleteClick(row) { //删除按钮
      console.log('删除点击了', row);
    },
    //======================================================================主要按钮






    // 列表 =====================================================================
    PageChange(e) {//分页器——页数变化
      this.pageNum = e
      this.getTableList()
    },
    pageSizeChange(e) { //分页器——每页数量变化
      this.pageNum = 1
      this.pageSize = e
      this.getTableList()
    },
    SouSuo() {
      this.pageNum = 1
      this.getTableList()
    },
    reset() {
      this.pageNum = 1
      this.keyword = ''
      this.getTableList()
    },
    //按条件查询菜单列表
    async getTableList() {
      return
      let userData = JSON.parse(sessionStorage.getItem('logOnUser'))
      let res = await this.$api.system.myRoleGetRoleList({

      })

      if (res.code == 200) {
        if (res.data.list.length == 0 && this.pageNum != 1) {
          this.pageNum = 1
          this.getTableList()
          return
        }
        this.TableData = res.data.list;
        this.totalSize = res.data.total;
      } else {
        this.$message.error(res.message)
      }

    },
    // ======================================================================列表

  },


};
</script>
<style scoped lang="less">
.tableBox {
  margin-top: 20px;

  /deep/ .el-table {
    .has-gutter {
      .is-leaf {
        background-color: #fafafa;
      }
    }
  }
}




.textBtn {
  position: relative;

  /deep/ .el-row {
    display: flex;
    justify-content: center;
  }

  .el {
    display: block;
    position: relative;

    &:nth-child(n+2) {

      // border-left: 1px solid #aaa;
      &::after {
        position: absolute;
        left: -1px;
        top: 50%;
        content: '';
        width: 2px;
        transform: translateY(-50%) scale(0.5, 1);
        height: 10px;
        background-color: #aaa;
      }
    }
  }
}



.Top {
  position: relative;
}
</style>